Install Webpack with NPM
Webpack and its various plugins require Node.js to run and NPM to install. The package.json file tracks the node dependencies for the project. The packages I am using for Webpack are installed as devDependencies and can be added using the npm install command with the -D flag eg:
npm install webpack -D
This is my package.json file:
Run Webpack scripts with NPM
I will explain a couple of the packages I am including here when we look at my actual webpack config. You can install all packages using "npm install" in the directory of package.json. I am also using npm to run the webpack scripts. I found this a much simpler option than including extra grunt/gulp scripts. The scripts are pretty straight forward build and build:dev run webpack with flags to tell it the environment and whether it should minimize the output. Th watch script is useful during development as it will automatically rebuild assets when it detects a file has changed.
Combine CSS into a single file with Webpack
import '../css/theme.scss' import '../vendor/tagsinput'
Run NPM scripts in ASP.NET Core Application
The scripts so far are completely independent to the ASP.NET Core application and work well being run as npm scripts from the console:
npm run build npm run watch
We can integrate the into the .net build and publish workflow by adding some steps the the build process in the projects .csproj file. These scripts come from good post on codeburst.io on webpack.
<Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('wwwroot\dist') "> <!-- Ensure Node.js is installed --> <Exec Command="node --version" ContinueOnError="true"> <Output TaskParameter="ExitCode" PropertyName="ErrorCode" /> </Exec> <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." /> <!-- In development, the dist files won't exist on the first run or when cloning to a different machine, so rebuild them if not already present. --> <Message Importance="high" Text="Performing first-run Webpack build..." /> <Exec Command="npm run build:dev" /> </Target> <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish"> <Exec Command="npm install" /> <Exec Command="npm run build" /> <ItemGroup> <DistFiles Include="wwwroot\dist\**" /> <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)"> <RelativePath>%(DistFiles.Identity)</RelativePath> <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory> </ResolvedFileToPublish> </ItemGroup> </Target>
The "DebugRunWebpack" target will build the assets in dev mode if they dont already exist. "PublishRunWebpack" will build and include the files when running dotnet publish. This is useful for automated build pipelines such as visual studio online.
The setup here is very basic and a good starting point - especially if you are not using a framework such as react. Functionality that could be added depending on the project is separating the vendor assets into a different file/process as well as adding linting, source maps and more to the webpack config.